<template>
  <div class="xs">
    <div class="wrap">
      <c-title :title="title"></c-title>
      <ul class="com">
        <li v-for="item,index in list" :key="item.id"
        :class="[index==list.length - 1 && count==total ? 'active':'']"
        >
          <a class="xs_item">
            <v-item
              :id="item.id"
              :img="item.img"
              :title="item.title"
              :des="item.des"
              :countInfo="item.countInfo"
            ></v-item>
          </a>



        </li>
        <li
        :class="[count!=total ? 'active':'']"
        >

        
           <a class="more">
               <div class="goMore">
                   <div class="dot">
                       <van-icon name="arrow" />
                   </div>
                   <p class="tt">
                       更多{{pageUriInfo.categoryName}}
                   </p>
               </div>
            </a> 
       </li>
      </ul>

      <div class="change">
        <a @click="changeMore" :class="[count >= total ? 'active':'']"> 换一换&nbsp;<van-icon name="replay" /> </a>
      </div>
    </div>
  </div>
</template>

<script>
import { initXsAlbumListData } from "@/request/api.js";
export default {
  data() {
    return {
      title: "相似专辑",
      list: [],
      page: 1,
      pageSize: 6,
      delay: null,
      total:0,
      count:0,
      pageUriInfo:{},
      isShow:false,
      i:0,
      albumId:0
    };
  },
  watch:{
      count(val){
          if(val >= this.total ){
              this.isShow = true
          }
      }
  },
  props: {
    id: {
      type: Number,
    },
  },
  watch:{
    id:{
      immediate:true,
      deep:true,
      handler(val){
        if(val){
          this.intiData()
        }else{
          return
        }
      }
    }
  },

  created() {
  
    
  },
  methods: {
    intiData() {
      // albumId=9723091&page=1&pageSize=6
      let data = {
        page: this.page,
        pageSize: this.pageSize,
        albumId:this.id,
      };
      initXsAlbumListData(data).then((res) => {
        let { data } = res.data;
        this.total = data.totalCount
        this.pageUriInfo = data.albumBriefDetailInfos[0].pageUriInfo
        console.log(res.data);
        data.albumBriefDetailInfos.forEach((item) => {
            this.count++
           this.i++
          let obj = {
            id: item.albumInfo.id,
            img: "https://imagev2.xmcdn.com/" + item.albumInfo.cover,
            title: item.albumInfo.title,
            countInfo: item.statCountInfo,
            des: item.albumInfo.shortIntro,
          };

          this.list.push(obj);
        });
      });
    },

    changeMore() {
        if(this.count >= this.total){
            return
        }

      if (this.delay) {
        clearTimeout(this.delay);
      }

      this.delay = setTimeout(() => {
        this.i = 0
        this.page++
        let list = []
        let data = {
          page: this.page,
          pageSize: this.pageSize,
          albumId: this.id,
        };
        initXsAlbumListData(data).then((res) => {
          let { data } = res.data;
          console.log(res.data);
          data.albumBriefDetailInfos.forEach((item) => {
              this.count++
              this.i++
            let obj = {
              id: item.albumInfo.id,
              img: "https://imagev2.xmcdn.com/" + item.albumInfo.cover,
              title: item.albumInfo.title,
              countInfo: item.statCountInfo,
              des: item.albumInfo.shortIntro,
            };

            list.push(obj);
          });

          this.list = list
        });
      }, 300);

      this.delay = null;
    },
  },
};
</script>

<style lang="scss" scoped>
.xs {
  padding: 15px 15px;
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      margin-bottom: 10px;
      width: 104px;
      a {
        display: block;

        .goMore{
            width: 103px;
            height: 103px;
            background-color: #f6f7f8;
            padding-top: 20px;
            border-radius: 4px;
            .dot{
                margin:0px auto 6px;
                width: 35px;
                height: 35px;
                text-align: center;
                line-height: 35px;
                border-radius: 50%;
                background-color: #f24821;
                font-size: 14px;
                color: #fff;
            }
            p{
                font-size: 14px;
                color: #f24821;
                text-align: center;
            }
        }
      }
    }

    li.active{
        display: none;
    }

  }
  .change {
    padding: 17px 0;
    text-align: center;
    a {
      display: inline-block;
      color: #fff;
      font-size: 15px;
      background-color: #f24821;
      border: 1px solid #f24821;
      width: 94px;
      height: 34px;
      text-align: center;
      line-height: 34px;
      border-radius: 17px;
    }
    a.active{
        color: #c3c3c3;
        border: 1px solid #c3c3c3;
        background-color: #fff; 
    }
  }
}
/deep/ .v-item {
  .img {
    width: 103px;
    height: 103px;
  }
}
</style>

